<template>
  <PrintBox :printRow="printList" id="printBox">
    <template slot="title" slot-scope="scope">
      <div style="margin-bottom: 20px">购置设备审批表 STET/B/06-1</div>
    </template>
    <template slot-scope="scope">
      <!-- 表格  class  table-page  必须-->
      <table
        style="border-collapse: collapse"
        border="1"
        cellspacing="0"
        class="table-page"
        :isVertical="false"
      >
        <tr>
          <td colspan="2" style="width: 50mm">检测部门</td>
          <td colspan="3" style="width: 50mm">{{ scope.item.deptName }}</td>
          <td colspan="2" style="width: 50mm">申请人</td>
          <td colspan="2" style="width: 50mm">{{ scope.item.createByName }}</td>
        </tr>
        <tr>
          <td rowspan="3">设备信息</td>
          <td colspan="1">设备名称</td>
          <td colspan="3" style="width: 50mm">{{ scope.item.deviceName }}</td>
          <td colspan="1">数量</td>
          <td colspan="1">{{ scope.item.num }}</td>
          <td colspan="1" style="width: 25mm">单价</td>
          <td colspan="1">{{ scope.item.price }}</td>
        </tr>
        <tr>
          <td colspan="1">主要用途</td>
          <td colspan="7">{{ scope.item.useInfo }}</td>
        </tr>
        <tr>
          <td colspan="1">技术要求</td>
          <td colspan="7">{{ scope.item.techInfo }}</td>
        </tr>
        <tr>
          <td rowspan="5">供应商信息</td>
          <td>名称</td>
          <td colspan="4">{{ scope.item.supplierName }}</td>
          <td>联系人</td>
          <td colspan="2">{{ scope.item.person }}</td>
        </tr>
        <tr>
          <td>地址</td>
          <td colspan="4">{{ scope.item.address }}</td>
          <td>电话</td>
          <td colspan="2">{{ scope.item.phone }}</td>
        </tr>
        <tr>
          <td>备案情况</td>
          <td colspan="7">
            <div style="display: flex; align-items: center">
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input
                  :checked="scope.item.isRecord == 0"
                  type="checkbox"
                  n
                />有
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input type="checkbox" :checked="scope.item.isRecord == 1" />无
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>供货情况</td>
          <td colspan="7">
            <div style="display: flex; align-items: center">
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input :checked="scope.item.isGoods == 0" type="checkbox" n />有
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input type="checkbox" :checked="scope.item.isGoods == 1" />无
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>提供资料</td>
          <td colspan="7">
            <div>
              <div style="display: flex; align-items: center">
                <div style="width: 200px; width: 102px; text-align: left">
                  营业执照
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    width: 30mm;
                    margin-left: 10mm;
                  "
                >
                  <input :checked="true" type="checkbox" />有
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    width: 30mm;
                    margin-left: 10mm;
                  "
                >
                  <input type="checkbox" />无
                </div>
              </div>
              <div style="display: flex; align-items: center">
                <div style="width: 200px; width: 102px; text-align: left">
                  产品说明书
                </div>

                <div
                  style="
                    display: flex;
                    align-items: center;
                    width: 30mm;
                    margin-left: 10mm;
                  "
                >
                  <input
                    :checked="scope.item.isInstruction == 0"
                    type="checkbox"
                    n
                  />有
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    width: 30mm;
                    margin-left: 10mm;
                  "
                >
                  <input
                    type="checkbox"
                    :checked="scope.item.isInstruction == 1"
                  />无
                </div>
              </div>
              <div style="display: flex; align-items: center">
                <div style="width: 200px; width: 102px; text-align: left">
                  产品质量证明文件
                </div>

                <div
                  style="
                    display: flex;
                    align-items: center;
                    width: 30mm;
                    margin-left: 10mm;
                  "
                >
                  <input
                    :checked="scope.item.isMass == 0"
                    type="checkbox"
                    n
                  />有
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    width: 30mm;
                    margin-left: 10mm;
                  "
                >
                  <input type="checkbox" :checked="scope.item.isMass == 1" />无
                </div>
              </div>
              <div
                style="display: flex; align-items: center; position: relative"
              >
                <div style="width: 200px; width: 102px; text-align: left">
                  其他资料
                </div>
                {{ scope.item.otherInfo || "/" }}
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">检测部门意见</td>
          <td colspan="7" style="position: relative; height: 100px">
            <div
              style="
                position: absolute;
                top: 30px;
                left: 10px;
                text-align: left;
              "
            >
              <template v-if="CheckApprove(scope, 'jcbm').ShowMessage">
                {{ CheckApprove(scope, "jcbm").MessageText }}
              </template>
            </div>
            <div style="display: flex; align-items: center">
              <div style="display: flex; align-items: center; width: 30mm">
                <input
                  type="checkbox"
                  :checked="checkHistoryNodeComment(scope, 'jcbm').type == 1"
                />情况属实
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input
                  type="checkbox"
                  :checked="
                    checkHistoryNodeComment(scope, 'jcbm').type == 2 ||
                    checkHistoryNodeComment(scope, 'jcbm').type == 3
                  "
                />情况不属实
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: flex-end;
                text-align: left;
                margin-top: 30px;
              "
            >
              <div style="width: 40mm; position: relative">
                部门负责人：<template
                  v-if="CheckApprove(scope, 'jcbm').ShowImg"
                >
                  <img
                    style="width: 80px; position: absolute; top: -10px"
                    :src="CheckApprove(scope, 'jcbm').ApproveImg"
                  />
                </template>
              </div>
              <div style="width: 40mm">
                日期：{{ checkHistoryNode(scope, "jcbm").endTime }}
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">技术质量部门意见</td>
          <td colspan="7" style="position: relative; height: 100px">
            <div
              style="
                position: absolute;
                top: 30px;
                left: 10px;
                text-align: left;
              "
            >
              <template v-if="CheckApprove(scope, 'jszlb').ShowMessage">
                {{ CheckApprove(scope, "jszlb").MessageText }}
              </template>
            </div>
            <div style="display: flex; align-items: center">
              <div style="display: flex; align-items: center; width: 30mm">
                <input
                  type="checkbox"
                  :checked="checkHistoryNodeComment(scope, 'jszlb').type == 1"
                />同意
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input
                  type="checkbox"
                  :checked="
                    checkHistoryNodeComment(scope, 'jszlb').type == 2 ||
                    checkHistoryNodeComment(scope, 'jszlb').type == 3
                  "
                />不同意
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: flex-end;
                text-align: left;
                margin-top: 30px;
              "
            >
              <div style="width: 40mm; position: relative">
                部门负责人：<template
                  v-if="CheckApprove(scope, 'jszlb').ShowImg"
                >
                  <img
                    style="width: 80px; position: absolute; top: -10px"
                    :src="CheckApprove(scope, 'jsfzr').ApproveImg"
                  />
                </template>
              </div>
              <div style="width: 40mm">
                日期：{{ checkHistoryNode(scope, "jszlb").endTime }}
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">审批意见</td>
          <td colspan="7" style="position: relative; height: 100px">
            <div
              style="
                position: absolute;
                top: 30px;
                left: 10px;
                text-align: left;
              "
            >
              <template v-if="CheckApprove(scope, 'jsfzr').ShowMessage">
                {{ CheckApprove(scope, "jsfzr").MessageText }}
              </template>
            </div>
            <div style="display: flex; align-items: center">
              <div style="display: flex; align-items: center; width: 30mm">
                <input
                  type="checkbox"
                  :checked="checkHistoryNodeComment(scope, 'jsfzr').type == 1"
                />同意购置
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input
                  type="checkbox"
                  :checked="
                    checkHistoryNodeComment(scope, 'jsfzr').type == 2 ||
                    checkHistoryNodeComment(scope, 'jsfzr').type == 3
                  "
                />不同意购置
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: flex-end;
                text-align: left;
                margin-top: 30px;
              "
            >
              <div style="width: 40mm; position: relative">
                技术负责人：<template
                  v-if="CheckApprove(scope, 'jsfzr').ShowImg"
                >
                  <img
                    style="width: 80px; position: absolute; top: -10px"
                    :src="CheckApprove(scope, 'jsfzr').ApproveImg"
                  />
                </template>
              </div>
              <div style="width: 40mm">
                日期：{{ checkHistoryNode(scope, "jsfzr").endTime }}
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">管理层意见</td>
          <td
            colspan="7"
            style="position: relative; height: 100px; vertical-align: bottom"
          >
            <div
              style="position: absolute; top: 0px; left: 10px; text-align: left"
            >
              <template v-if="CheckApprove(scope, 'glc').ShowMessage">
                {{ CheckApprove(scope, "glc").MessageText }}
              </template>
            </div>

            <div
              style="display: flex; justify-content: flex-end; text-align: left"
            >
              <div style="width: 40mm; position: relative">
                总经理：
                <template v-if="CheckApprove(scope, 'glc').ShowImg">
                  <img
                    style="width: 80px; position: absolute; top: -10px"
                    :src="CheckApprove(scope, 'glc').ApproveImg"
                  />
                </template>
              </div>
              <div style="width: 40mm">
                日期：{{ checkHistoryNode(scope, "glc").endTime }}
              </div>
            </div>
          </td>
        </tr>
      </table>
      <!-- 底部信息位置 -->
      <div class="page-bottom" style="page-break-after: always">
        <div class="desc">注：本表格自2021年6月1日起生效</div>
      </div>
    </template>
  </PrintBox>
</template>
<script>
import printStyle from "@/utils/print.js";
import { deviceBuyInfo } from "@/api/device/deviceBuy.js";
export default {
  data() {
    return {
      printList: [],
      formData: {},
    };
  },
  methods: {
    getinfo(id) {
      return deviceBuyInfo(id).then((response) => {
        this.formData = response.data;
      });
    },

    async printBox(e) {
      await this.getinfo(e);
      //infos  勾选的数据 如果有勾选就打印勾选。
      this.printList = [this.formData];
      setTimeout(() => {
        document.title = "购置设备审批表 STET/B/06-1";
        this.$print({
          printable: "printBox", //打印区域id
          type: "html", //打印类型是html
          scanStyles: false,
          targetStyles: ["*"],
          style: this.workStyle(),
          onPrintDialogClose: () => {
            document.title = process.env.VUE_APP_TITLE;
          },
        });
      }, 500);
    },
    // 可以自定义样式  printStyle 是公共样式 切勿私自修改
    workStyle() {
      return `${printStyle}
        table,
        table tr th,
        table tr td {
          padding: 4px;
          height:53px
        }
        .desc{
        text-align: left; font-size: 12px; margin-top: 10px
      }
            .df {
                display: flex;
              }
      `;
    },
  },
};
</script>
